@extends('layouts.app')

@section("head-js")
    {{--<script src="https://cdn.bootcss.com/jquery-validate/1.17.0/jquery.validate.min.js"></script>--}}
    {{--<script src="https://cdn.bootcss.com/jquery-validate/1.17.0/additional-methods.min.js"></script>--}}
    {{--<script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.12.0/validate.min.js"></script>--}}
    <script src="https://cdn.bootcss.com/moment.js/2.22.1/moment.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.22.1/locale/zh-cn.js"></script>
    <script type="text/javascript" src="{{asset('js/validator.js')}}"></script>

@endsection

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Dashboard</div>

                    <div class="card-body">
                        <form action="" method="post" id="the-form">
                            {{csrf_field()}}
                            <div class="form-group">
                                <label for="name">姓名：</label>
                                <input type="text" name="name" id="name" value="{{old("name")}}" class="form-control">
                                <span class="error"></span>
                                @foreach($errors->get('name') as $error)
                                <p class="error">{{ $error }}</p>
                                @endforeach

                            </div>
                            <div class="form-group">
                                <label for="gender">性别：</label>
                                <select name="gender" id="gender">
                                    <option value="男" @if(old("gender")=="男") selected @endif>男</option>
                                    <option value="女" @if(old("gender")=="女") selected @endif>女</option>
                                </select>
                                <span class="error"></span>
                                @foreach($errors->get('gender') as $error)
                                    <p class="error">{{ $error }}</p>
                                @endforeach
                            </div>
                            <div class="form-group">
                                <label for="birth_date">出生日期：</label>
                                <input type="date" name="birth_date" id="birth_date" value="{{old("birth_date")}}" class="form-control">
                                <span class="error"></span>
                                @foreach($errors->get('birth_date') as $error)
                                    <p class="error">{{ $error }}</p>
                                @endforeach
                            </div>
                            <div class="form-group">
                                <label for="mobile_phone">手机：</label>
                                <input type="text" name="mobile_phone" id="mobile_phone" value="{{old("mobile_phone")}}">
                                <span class="error"></span>
                                @foreach($errors->get('mobile_phone') as $error)
                                    <p class="error">{{ $error }}</p>
                                @endforeach
                            </div>
                            <div class="form-group">
                                <label for="email">电邮：</label>
                                <input type="text" name="email" id="email" type="email" value="{{old("email")}}">
                                <span class="error"></span>
                                @foreach($errors->get('email') as $error)
                                    <p class="error">{{ $error }}</p>
                                @endforeach
                            </div>
                            <button class="btn btn-primary">保存</button>
                            <a class="btn btn-danger">取消</a>
                        </form>



                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section("foot-js")
    <script>
        $(function(){
            function getPastYear(years){
                return moment().subtract(years,'years').format("YYYY-MM-DD");
            }
            var rules = [
                {
                    name: 'email',
                    display:"电邮是必须的|你输入的不是合法邮箱|最大长度50",
                    rules: 'required|is_email|max_length(50)'
                },{
                    name: 'name',
                    display:"姓名是必须的|最大长度10|最小长度3",
                    rules: 'required|max_length(10)|min_length(3)'
                },
                {
                    name:'birth_date',
                    display:"出生日期是必须的|日期必须在18年前("+getPastYear(18)+"前)",
                    rules: 'required|is_past(18)'
                },
                {
                    name: 'mobile_phone',
                    display:"手机号是必须的|必须输入合法的手机号",
                    rules: "required|is_mobile"
                }
            ];
            new Validator('the-form',rules,function(obj,evt){
                $(".error").text("");
                if(obj.errors){
                    obj.errors.forEach(function(e){
                        //console.log(e)
                        $(e.element).next("span").text(e.message);
                    });

                }
            });

            $("input, select").on("keydown change",function(){
                $(this).next("span").text("");
                $(this).parent().find("p.error").text("");
            });

        });
    </script>
@endsection